<template>
  <div class="app-container" v-loading="Loading">
    <div class="tab-bar">
      <div
        class="tab-item"
        :class="current === it.id ? 'tab-item-ac' : ''"
        v-for="(it, idx) in tabList"
        :key="idx"
        @click="handleTabClick(it.id)"
      >
        {{ it.name }}
      </div>
    </div>
    <div class="form-main" ref="formMain">
      <el-form
        :model="form"
        ref="formRef"
        :rules="rules"
        style="margin-top: 30px"
      >
        <div ref="basicInfo">
          <el-card class="box-card">
            <div slot="header" class="clearfix">基础信息</div>
            <el-form-item
              label="地区"
              prop="enterpriseInfo.provinceId"
              label-width="120px"
            >
              <el-select
                clearable
                v-model="form.enterpriseInfo.provinceId"
                placeholder="请选择地区"
                :disabled="$route.query.id ? true : false"
                style="width: 500px"
              >
                <el-option
                  v-for="item in ProvinceList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="企业税号"
              clearable
              maxlength="200"
              prop="enterpriseInfo.creditCode"
              label-width="120px"
            >
              <el-input
                @blur="gerMsgFlag()"
                clearable
                placeholder="请输入企业税号"
                :disabled="$route.query.id ? true : false"
                style="width: 500px"
                v-model="form.enterpriseInfo.creditCode"
              />
            </el-form-item>
            <el-form-item
              label="企业名称"
              prop="enterpriseInfo.taxpayerName"
              label-width="120px"
              clearable
            >
              <el-input
                placeholder="请输入企业名称"
                clearable
                :disabled="$route.query.id ? true : false"
                maxlength="200"
                style="width: 500px"
                v-model="form.enterpriseInfo.taxpayerName"
              />
            </el-form-item>

            <el-form-item
              label="税务密码"
              prop="enterpriseInfo.password"
              label-width="120px"
            >
              <el-input
                clearable
                maxlength="200"
                placeholder="请输入税务密码"
                style="width: 500px"
                v-model="form.enterpriseInfo.password"
              />
            </el-form-item>
            <el-form-item
              label="法人"
              prop="enterpriseInfo.legalPerson"
              label-width="120px"
            >
              <el-input
                clearable
                maxlength="200"
                placeholder="请输入法人姓名"
                style="width: 500px"
                v-model="form.enterpriseInfo.legalPerson"
              />
            </el-form-item>
            <el-form-item
              label="公司占比"
              prop="legalPersonRatio"
              label-width="120px"
            >
              <el-input
                clearable
                maxlength="200"
                placeholder="请输入公司占比"
                style="width: 500px"
                type="number"
                min="0"
                v-model="form.enterpriseInfo.legalPersonRatio"
              >
                <template slot="suffix"
                  ><span style="color: #000">%</span></template
                >
              </el-input>
            </el-form-item>
            <el-form-item
              label="联系方式"
              prop="enterpriseInfo.phone"
              label-width="120px"
            >
              <el-input
                clearable
                placeholder="请输入联系人"
                style="width: 500px"
                maxlength="11"
                v-model="form.enterpriseInfo.phone"
              />
            </el-form-item>
            <el-form-item
              v-if="sendCodeBtn"
              label="验证码"
              prop="code"
              :rules="[
                {
                  required: false,
                  message: '请输入验证码',
                  trigger: 'change'
                },
                { validator: checkCode, trigger: 'blur' }
              ]"
              label-width="120px"
            >
              <el-input
                clearable
                placeholder="请输入税务查询密码"
                style="width: 500px"
                v-model="form.code"
              >
                <template slot="append">
                  <el-button
                    class="btnSty"
                    :disabled="btndisabled"
                    :type="!btnDisabled ? 'primary' : 'info'"
                    @click="sendCode"
                    >{{ btnName }}</el-button
                  >
                </template>
              </el-input>
            </el-form-item>

            <el-form-item
              label-width="120px"
              v-if="!isSuccess && !getSuccessBtn"
            >
              <el-button
                style="width: 500px"
                type="primary"
                @click="getMessage('formRef')"
                >获取业务数据</el-button
              >
            </el-form-item>

            <el-form-item label-width="120px" v-if="isSuccess">
              <el-button :loading="isSuccess" style="width: 500px" type="info"
                >数据正在获取中</el-button
              >
            </el-form-item>
            <el-form-item label-width="120px" v-if="getSuccessBtn">
              <el-button style="width: 500px" type="info"
                >数据获取成功</el-button
              >
            </el-form-item>
          </el-card>
          <el-card class="box-card">
            <el-form-item label="客户经理" label-width="120px" prop="adminId">
              <el-select
                clearable
                style="width: 500px"
                v-model="form.adminId"
                filterable
                placeholder="请选择客户经理"
              >
                <el-option
                  v-for="item in managerList"
                  :key="item.id"
                  :label="item.name + ' ' + '(' + item.phone + ')'"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="办理业务员" label-width="120px">
              <el-select
                clearable
                style="width: 500px"
                v-model="form.salesmanIds"
                filterable
                multiple
                placeholder="请选择办理业务员"
              >
                <el-option
                  v-for="item in managerList"
                  :key="item.id"
                  :label="item.name + ' ' + '(' + item.phone + ')'"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="企业注册日期" label-width="120px">
              <el-date-picker
                clearable
                v-model="form.registerTime"
                type="date"
                placeholder="选择日期"
                style="width: 500px"
                value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日"
              />
            </el-form-item>
            <el-form-item
              label="财务联系人"
              label-width="120px"
              prop="financePhone"
            >
              <el-input
                clearable
                placeholder="请输入财务联系电话号码"
                style="width: 500px"
                maxlength="11"
                v-model="form.financePhone"
              />
            </el-form-item>
            <el-form-item label="一般户" label-width="120px">
              <el-input
                clearable
                placeholder="请输入一般户"
                style="width: 500px"
                maxlength="200"
                v-model="form.normalAccount"
              />
            </el-form-item>
            <el-form-item label="基本户" label-width="120px">
              <el-input
                clearable
                maxlength="200"
                placeholder="请输入基本户"
                style="width: 500px"
                v-model="form.basicAccount"
              />
            </el-form-item>
            <div v-for="(it, idx) in form.shareholderList" :key="idx">
              <el-form-item :label="`股东${idx + 1}`" label-width="120px">
                <el-input
                  clearable
                  placeholder="请输入股东"
                  maxlength="200"
                  style="width: 500px"
                  v-model="it.realname"
                />
                <el-button
                  v-if="idx === 0"
                  icon="el-icon-plus"
                  @click="addShareholder"
                  type="primary"
                  plain
                  >添加</el-button
                >
                <el-button
                  v-if="idx > 0"
                  icon="el-icon-delete"
                  type="primary"
                  plain
                  @click="deleteShareholder(idx)"
                  >删除</el-button
                >
              </el-form-item>

              <el-form-item label="公司占比" label-width="120px">
                <el-input
                  clearable
                  style="width: 500px"
                  maxlength="200"
                  placeholder="请输入公司占比"
                  v-model="it.companyRatio"
                >
                  <template slot="suffix"
                    ><span style="color: #000">%</span></template
                  >
                </el-input>
              </el-form-item>
              <el-form-item label="联系方式" label-width="120px">
                <el-input
                  clearable
                  style="width: 500px"
                  placeholder="请输入联系方式"
                  maxlength="11"
                  v-model="it.phone"
                ></el-input>
              </el-form-item>
              <el-form-item label="个人负债" label-width="120px">
                <el-input
                  clearable
                  style="width: 500px"
                  maxlength="200"
                  placeholder="请输入个人负债"
                  v-model="it.personalDebt"
                ></el-input>
              </el-form-item>
            </div>
          </el-card>
        </div>
        <div ref="appropriations">
          <el-card class="box-card">
            <div slot="header" class="clearfix">批款详情</div>
            <el-form-item
              label="产品名称"
              label-width="120px"
              prop="productId"
              style="display: inline-block"
            >
              <div style="">
                <div class="product-img">
                  <div
                    class="product-img-box"
                    v-for="(item, idx) in form.productList"
                    :key="item.id"
                  >
                    <el-tooltip
                      effect="dark"
                      :content="item.name"
                      placement="top"
                    >
                      <img style="" :src="item.pic" />
                    </el-tooltip>

                    <i
                      @click="delProduct(idx, item.id)"
                      style="color: #ccc; font-weight: bold"
                      class="el-icon-close i2"
                    ></i>
                  </div>

                  <div style="line-height: 80px; margin-right: 10px">
                    <div class="uploadPic" @click="selectPic()">
                      <i
                        style="font-size: 40px; color: #ccc; font-weight: bold"
                        class="el-icon-plus i1"
                      ></i>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <el-select
                style="width: 500px"
                v-model="form.productId"
                placeholder="请选择推荐产品"
              >
                <el-option
                  v-for="item in recommendProductList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select> -->
            </el-form-item>

            <el-form-item label="批款额度" label-width="120px">
              <el-input
                style="width: 500px"
                placeholder="请输入额度区间"
                type="number"
                min="0"
                v-model="form.approvalQuota"
              >
                <template slot="suffix"
                  ><span style="color: #000">万元</span></template
                >
              </el-input>
            </el-form-item>
            <el-form-item label="批款日期" label-width="120px">
              <el-date-picker
                clearable
                v-model="form.approvalTime"
                type="date"
                placeholder="选择日期"
                style="width: 500px"
                value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日"
              />
            </el-form-item>
            <el-form-item
              label="批款方式"
              label-width="120px"
              prop="approvalWay"
              style="display: inline-block"
            >
              <el-select
                style="width: 500px"
                v-model="form.approvalWay"
                placeholder="请选择推荐产品"
              >
                <el-option
                  v-for="item in approvalWayList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-card>
        </div>
        <div ref="taxCredit">
          <el-card class="box-card">
            <div slot="header" class="clearfix">纳税信用</div>
            <el-table
              :data="taxCreditTable"
              border
              style=""
              v-loading="isSuccess"
            >
              <el-table-column
                align="center"
                prop="evaluationYear"
                label="评价年度"
              />
              <el-table-column
                align="center"
                prop="evaluationScore"
                label="评价得分"
              />
              <el-table-column
                align="center"
                prop="evaluationResult"
                label="评价结果"
              />
            </el-table>
          </el-card>
        </div>

        <div ref="InvoiceAmount">
          <el-card class="box-card">
            <div slot="header" class="clearfix">开票金额</div>
            <el-table
              :data="InvoiceAmountTable"
              border
              style=""
              v-loading="isSuccess"
            >
              <el-table-column
                label="月份"
                align="center"
                prop="year"
              ></el-table-column>
              <el-table-column
                label="1月"
                align="center"
                prop="1"
              ></el-table-column>
              <el-table-column
                label="2月"
                align="center"
                prop="2"
              ></el-table-column>
              <el-table-column
                label="3月"
                align="center"
                prop="3"
              ></el-table-column>
              <el-table-column
                label="4月"
                align="center"
                prop="4"
              ></el-table-column>
              <el-table-column
                label="5月"
                align="center"
                prop="5"
              ></el-table-column>
              <el-table-column
                label="6月"
                align="center"
                prop="6"
              ></el-table-column>
              <el-table-column
                label="7月"
                align="center"
                prop="7"
              ></el-table-column>
              <el-table-column
                label="8月"
                align="center"
                prop="8"
              ></el-table-column>
              <el-table-column
                label="9月"
                align="center"
                prop="9"
              ></el-table-column>
              <el-table-column
                label="10月"
                align="center"
                prop="10"
              ></el-table-column>
              <el-table-column
                label="11月"
                align="center"
                prop="11"
              ></el-table-column>
              <el-table-column
                label="12月"
                align="center"
                prop="12"
              ></el-table-column>
              <el-table-column
                label="合计"
                align="center"
                prop="add"
              ></el-table-column>
            </el-table>
          </el-card>
        </div>
        <div ref="SupplementaryTax">
          <el-card class="box-card">
            <div slot="header" class="clearfix">纳税金额</div>
            <el-table
              :data="SupplementaryTaxTable"
              border
              v-loading="isSuccess"
            >
              <el-table-column
                label="月份"
                align="center"
                prop="year"
              ></el-table-column>
              <el-table-column
                label="1月"
                align="center"
                prop="1"
              ></el-table-column>
              <el-table-column
                label="2月"
                align="center"
                prop="2"
              ></el-table-column>
              <el-table-column
                label="3月"
                align="center"
                prop="3"
              ></el-table-column>
              <el-table-column
                label="4月"
                align="center"
                prop="4"
              ></el-table-column>
              <el-table-column
                label="5月"
                align="center"
                prop="5"
              ></el-table-column>
              <el-table-column
                label="6月"
                align="center"
                prop="6"
              ></el-table-column>
              <el-table-column
                label="7月"
                align="center"
                prop="7"
              ></el-table-column>
              <el-table-column
                label="8月"
                align="center"
                prop="8"
              ></el-table-column>
              <el-table-column
                label="9月"
                align="center"
                prop="9"
              ></el-table-column>
              <el-table-column
                label="10月"
                align="center"
                prop="10"
              ></el-table-column>
              <el-table-column
                label="11月"
                align="center"
                prop="11"
              ></el-table-column>
              <el-table-column
                label="12月"
                align="center"
                prop="12"
              ></el-table-column>
              <el-table-column
                label="合计"
                align="center"
                prop="add"
              ></el-table-column>
            </el-table>
          </el-card>
        </div>
        <div ref="SupplementaryInformation">
          <el-card class="box-card">
            <div slot="header" class="clearfix">补充信息</div>
            <el-form-item label="客户诉求" label-width="120px">
              <el-input
                clearable
                style="width: 700px"
                maxlength="200"
                v-model="form.customerDemands"
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
              ></el-input
            ></el-form-item>
            <el-form-item label="情况概括" label-width="120px">
              <el-input
                clearable
                maxlength="200"
                v-model="form.situationOverview"
                style="width: 700px"
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
              ></el-input
            ></el-form-item>
          </el-card>
        </div>
      </el-form>
    </div>

    <el-backtop target=".form-main" :bottom="100" :visibility-height="1000">
      <div
        style="
           {
            height: 100%;
            width: 100%;
            background-color: #ccc;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
            text-align: center;
            line-height: 40px;
            border-radius: 20px;
            color: #1989fa;
          }
        "
      >
        <i style="color: #fff;" class="el-icon-upload2"></i>
      </div>
    </el-backtop>
    <div
      style="
        background-color: #fff;
        width: 100%;
        height: 60px;
        padding-bottom: 20px;
      "
    >
      <div
        style="
          margin: 20px;
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translate(-50%, 0);
        "
      >
        <el-button
          style="width: 150px"
          type="primary"
          @click="submitForm('formRef')"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  getProvinceList,
  getTaxNo,
  login,
  sendCode,
  smsMsLogin,
  noCodeL
} from "@/api/tax";
import { monthUtil } from "@/utils/date";
import { debounce } from "@/utils/index";
import {
  addCompanyCustomer,
  getCompanyCustomerDetail,
  editCompanyCustomer
} from "@/api/customer";
import { getUserList } from "@/api/dept";
const form = {
  enterpriseInfo: {
    provinceId: "", //地区id
    taxpayerName: "", //公司名称
    creditCode: "", //税务账号
    password: "", //税务密码
    legalPerson: "", // 法人姓名
    legalPersonRatio: "", //公司占比
    phone: "" //法人电话
  },
  code: "",
  // 客户经理表单
  adminId: "", //客户经理
  salesmanIds: "",
  registerTime: "", //企业注册日期
  financePhone: "", //财务联系人
  normalAccount: "", // 一般户
  basicAccount: "", //基本户
  shareholderList: [
    {
      realname: null, //股东
      companyRatio: null, //公司占比
      phone: null, //联系方式
      personalDebt: null //个人负债
    }
  ],

  // 补充信息
  customerDemands: "",
  situationOverview: "",
  productId: null, //产品id
  productList: [],
  approvalQuota: null, //额度
  approvalTime: "", //批款日期
  approvalWay: "" //批款方式
};
var checkPhone1 = (rule, value, callback) => {
  if (!value) {
  } else {
    const reg = /^1[3-9][0-9]\d{8}$/;
    // 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
    if (reg.test(value)) {
      callback();
    } else {
      // 具体错误信息没有提示
      return callback(new Error("请输入正确的手机号"));
    }
  }
};
export default {
  computed: {
    btnName() {
      if (this.time == 0) {
        this.btndisabled = false;
        this.time = 60;
        return "重新发送";
      } else if (this.time > 0 && this.time < 60) {
        this.btndisabled = true;
        return `(${this.time}后重新发送)`;
      } else {
        this.btndisabled = false;
        return `发送验证码`;
      }
    }
  },
  async created() {
    this.restForm();
    await this.getProvince();
    await this.getUserList();
    this.getDetail();
  },
  async mounted() {
    this.approvalWayList = await this.$getDictData("approval_way_list");
  },
  data() {
    //这个方法要写在用到这个方法的地方的前面
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3-9][0-9]\d{8}$/;
        // 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
        if (reg.test(value)) {
          callback();
        } else {
          // 具体错误信息没有提示
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };

    return {
      codeRequired: false,
      Loading: false,
      // 纳税信用表格
      taxCreditTable: [],
      // 开票金额表格
      InvoiceAmountTable: [],
      //纳税金额
      SupplementaryTaxTable: [],
      isSuccess: false,
      current: 0,
      managerList: [],
      tabList: [
        { name: "基本信息", id: 0 },
        { name: "批款详情", id: 1 },
        { name: "纳税信用", id: 2 },
        { name: "开票金额", id: 3 },
        { name: "补税金额", id: 4 },
        { name: "补充信息", id: 5 }
      ],
      form: Object.assign({}, form),
      rules: {
        "enterpriseInfo.provinceId": [
          {
            required: true,
            message: "请输入地区",
            trigger: "change"
          }
        ],
        "enterpriseInfo.taxpayerName": [
          { required: true, message: "请输入企业名称", trigger: "change" }
        ],
        "enterpriseInfo.creditCode": [
          { required: true, message: "请输入企业税号", trigger: "change" }
        ],
        "enterpriseInfo.password": [
          { required: true, message: "请输入税务密码", trigger: "change" }
        ],
        "enterpriseInfo.legalPerson": [
          { required: true, message: "请输入法人姓名", trigger: "change" }
        ],
        "enterpriseInfo.phone": [
          { required: true, message: "请输入联系人", trigger: "change" },
          { validator: checkPhone, trigger: "blur" }
        ],
        financePhone: [
          { required: false, message: "请输入联系人", trigger: "change" },
          { validator: checkPhone1, trigger: "blur" }
        ],
        adminId: [
          { required: true, message: "请选择客户经理", trigger: "change" }
        ]
      },
      btndisabled: false,
      time: 60,
      ProvinceList: [],
      approvalWayList: [],
      sendCodeBtn: false, // 验证码按钮
      getDataBtn: false, // 获取信息按钮
      getSuccessBtn: false, // 获取是否成功
      uuid: "", // 唯一标识
      enterpriseId: "",
      needCityCodeList: ["zhejiang", "hubei", "guangdong"]
    };
  },
  methods: {
    // 企业税号查询
    gerMsgFlag() {
      const code = this.form.enterpriseInfo.creditCode.trim();
      if (code) {
        // this.form.enterpriseInfo = Object.assign
        //防抖
        debounce(this.getCanymsgById(code), 2000);
      }
    },
    // 根据税号去查询信息
    getCanymsgById(code) {
      getTaxNo(code).then(res => {
        if (res.data) {
          if (res.data.creditEvaluationList) {
            this.taxCreditTable = res.data.creditEvaluationList;
          } else {
            this.taxCreditTable = [];
          }
          if (res.data.applayInfoDataList) {
            this.InvoiceAmountTable = res.data.applayInfoDataList.map(v => {
              return {
                year: v.year,
                ...monthUtil(v.monthData),
                add: v.total
              };
            });
          } else {
            this.InvoiceAmountTable = [];
          }
          if (res.data.paidTaxesDataList) {
            this.SupplementaryTaxTable = res.data.paidTaxesDataList.map(v => {
              return {
                year: v.year,
                ...monthUtil(v.monthData),
                add: v.total
              };
            });
          } else {
            this.SupplementaryTaxTable = [];
          }
          if (res.data.enterpriseInfo) {
            this.form.enterpriseInfo = Object.assign(
              {},
              this.form.enterpriseInfo,
              res.data.enterpriseInfo
            );
          } else {
            this.sendCodeBtn = false;
            this.form.code = "";
          }

          if (
            this.taxCreditTable.length == 0 &&
            this.InvoiceAmountTable.length == 0 &&
            this.SupplementaryTaxTable.length == 0
          ) {
            this.getSuccessBtn = false;
            // this.sendCodeBtn = true;
          } else {
            this.getSuccessBtn = true;
            this.form.code = "";
            this.sendCodeBtn = false;
            // this.sendCodeBtn = false;
          }
        } else {
          // this.sendCodeBtn = true;
        }
      });
    },
    // 重置表单
    restForm() {
      this.form = {
        enterpriseInfo: {
          provinceId: "", //地区id
          taxpayerName: "", //公司名称
          creditCode: "", //税务账号
          password: "", //税务密码
          legalPerson: "", // 法人姓名
          legalPersonRatio: "", //公司占比
          phone: "" //法人电话
        },
        code: "",
        // 客户经理表单
        salesmanIds: "",
        adminId: "", //客户经理
        registerTime: "", //企业注册日期
        financePhone: "", //财务联系人
        normalAccount: "", // 一般户
        basicAccount: "", //基本户
        shareholderList: [
          {
            realname: null, //股东
            companyRatio: null, //公司占比
            phone: null, //联系方式
            personalDebt: null //个人负债
          }
        ],

        // 补充信息
        customerDemands: "",
        situationOverview: "",
        productId: null, //产品id
        productList: [],
        approvalQuota: null, //额度
        approvalTime: "", //批款日期
        approvalWay: "" //批款方式
      };
    },
    // 获取部门列表
    getUserList() {
      getUserList().then(res => {
        this.managerList = res.data.map(v => {
          return {
            name: v.nickName,
            id: v.adminId,
            phone: v.phoneNumber
          };
        });
      });
    },
    // 获取详情
    getDetail() {
      if (this.$route.query.id) {
        this.$route.meta.title = "编辑企业客户";
        this.Loading = true;
        getCompanyCustomerDetail(this.$route.query.id)
          .then(res => {
            res.data.productId = [res.data.productId];
            if (res.data.salesmanIds) {
              res.data.salesmanIds = res.data.salesmanIds
                .split(",")
                .map(v => Number(v));
            }
            if (res.data.shareholderList.length == 0) {
              res.data.shareholderList = [
                {
                  realname: null, //股东
                  companyRatio: null, //公司占比
                  phone: null, //联系方式
                  personalDebt: null //个人负债
                }
              ];
            }
            if (res.data.queryStatus == 100) {
              this.isSuccess = true;
            }
            if (res.data.queryStatus == 200) {
              this.isSuccess == true;
              this.getSuccessBtn = true;
            }

            if (res.data.enterpriseInfo.creditCode) {
              this.getCanymsgById(res.data.enterpriseInfo.creditCode);
            }

            this.form = Object.assign({}, res.data);
            // 清空验证
            this.$nextTick(() => {
              this.$refs.formRef.clearValidate();
            });
            this.taxCreditTable = res.data.creditEvaluationList;
            this.InvoiceAmountTable = res.data.paidTaxesDataList.map(v => {
              return {
                year: v.year,
                ...monthUtil(v.monthData),
                add: v.total
              };
            });
            this.SupplementaryTaxTable = res.data.applayInfoDataList.map(v => {
              return {
                year: v.year,
                ...monthUtil(v.monthData),
                add: v.total
              };
            });

            this.Loading = false;
          })
          .finally(() => {
            this.Loading = false;
          });
      } else {
        this.$route.meta.title = "新增企业客户";
      }
    },
    //选择商品
    selectPic() {
      let that = this;
      that.$modalGoodList(
        function(row) {
          if (row) {
            that.$set(that.form, "productList", row);
            this.$set(
              that.form,
              "productId",
              row.map(v => {
                return v.id;
              })
            );
          }
        },
        1,
        that.form.productId
      );
    },
    //删除商品
    delProduct(idx, id) {
      this.form.productList.splice(idx, 1);
      const i = this.form.productId.findIndex(v => {
        return v === id;
      });
      if (i != -1) {
        this.form.productId.splice(i, 1);
      }
    },
    checkPhone2(rule, value, callback) {
      if (!value) {
      } else {
        const reg = /^1[3-9][0-9]\d{8}$/;
        // 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
        if (reg.test(value)) {
          callback();
        } else {
          // 具体错误信息没有提示
          return callback(new Error("请输入正确的手机号"));
        }
      }
    },
    checkCode(rule, value, callback) {
      if (!value) {
        return callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    },
    // 获取地区列表
    getProvince() {
      getProvinceList().then(res => {
        this.ProvinceList = res.data;
      });
    },
    submitForm(formName) {
      this.$refs[formName].clearValidate();

      let rlusItems = [
        "enterpriseInfo.provinceId",
        "enterpriseInfo.taxpayerName",
        "enterpriseInfo.creditCode",
        "enterpriseInfo.password",
        "enterpriseInfo.legalPerson",
        "enterpriseInfo.phone",
        "adminId"
      ];
      const validateFieldList = [];

      this.$refs[formName].validateField(rlusItems, async errorMsg => {
        if (!errorMsg) {
          validateFieldList.push(errorMsg);
          if (
            validateFieldList.length == rlusItems.length &&
            validateFieldList.every(v => v === "")
          ) {
            this.form.shareholderList.forEach((v, idx) => {
              if (
                v.realname == null &&
                v.phone == null &&
                v.companyRatio == null &&
                v.personalDebt == null
              ) {
                this.form.shareholderList.splice(idx, 1);
              }
            });
            let flagArr = [];
            let idxArr = [];
            this.form.shareholderList.forEach((v, idx) => {
              if (v.phone && !/^1[3456789]\d{9}$/.test(v.phone)) {
                idxArr.push(`股东${idx + 1}`);
                return flagArr.push(false);
              } else {
                return flagArr.push(true);
              }
            });
            if (flagArr.includes(false)) {
              this.$message.error(`请输入正确的${idxArr.join(",")} 的手机号`);
              return false;
            } else {
              this.submit();
            }

            return;
          }
        }
      });
    },

    submit() {
      if (this.$route.query.id) {
        const params = {
          ...this.form
        };
        if (params.productId) {
          params.productId = params.productId.join(",");
        }
        if (params.salesmanIds) {
          params.salesmanIds = params.salesmanIds.join(",");
        }

        editCompanyCustomer(params).then(res => {
          this.$message.success("修改成功");
          setTimeout(() => {
            this.restForm();
            this.$router.go(-1);
          }, 1000);
        });
      } else {
        const params = {
          ...this.form
        };
        if (params.productId) {
          params.productId = params.productId.join(",");
        }
        if (params.salesmanIds) {
          params.salesmanIds = params.salesmanIds.join(",");
        }
        addCompanyCustomer(params).then(res => {
          this.$message.success("提交成功");
          setTimeout(() => {
            this.restForm();
            this.$router.go(-1);
          }, 1000);
        });
      }
    },
    // 添加股东
    addShareholder() {
      this.form.shareholderList.push({
        realname: null, //股东
        companyRatio: null, //公司占比
        phone: null, //联系方式
        personalDebt: null //个人负债
      });
    },
    //删除股东
    deleteShareholder(idx) {
      this.form.shareholderList.splice(idx, 1);
    },
    // 发送验证码
    sendCode() {
      this.$refs.formRef.clearValidate();
      let rlusItems = [
        "enterpriseInfo.provinceId",
        "enterpriseInfo.taxpayerName",
        "enterpriseInfo.creditCode",
        "enterpriseInfo.password",
        "enterpriseInfo.legalPerson",
        "enterpriseInfo.phone"
      ];
      const validateFieldList = [];

      this.$refs.formRef.validateField(rlusItems, async errorMsg => {
        if (!errorMsg) {
          validateFieldList.push(errorMsg);
          if (
            validateFieldList.length == rlusItems.length &&
            validateFieldList.every(v => v === "")
          ) {
            let params = {
              phone: this.form.enterpriseInfo.phone,
              creditCodeOrTaxPayerId: this.form.enterpriseInfo.creditCode,
              uuid: this.uuid
            };
            sendCode(params).then(res => {
              this.timer();
              return this.$message.success(res.message);
            });
            this.btndisabled = true;
            // return;
          }
        }
      });
    },
    timer() {
      var timecount = setInterval(() => {
        this.time--;
        if (this.time < 1) {
          clearInterval(timecount);
        }
      }, 1000);
    },
    getMessage(formName) {
      this.$refs[formName].clearValidate();
      // let btndisabledLenth = this.sendCodeBtn ? 7 : 6;
      let rlusItems = [
        "enterpriseInfo.provinceId",
        "enterpriseInfo.taxpayerName",
        "enterpriseInfo.creditCode",
        "enterpriseInfo.password",
        "enterpriseInfo.legalPerson",
        "enterpriseInfo.phone",
        "code"
      ];

      if (!this.sendCodeBtn) {
        // 第一次登录
        rlusItems.pop();
        const validateFieldList = [];
        this.$refs[formName].validateField(rlusItems, async errorMsg => {
          if (!errorMsg) {
            validateFieldList.push(errorMsg);
            if (
              validateFieldList.length == rlusItems.length &&
              validateFieldList.every(v => v === "")
            ) {
              this.firstLogin();
            }
          }
        });
      } else {
        // 第二次登录
        const validateFieldList = [];
        this.$refs[formName].validateField(rlusItems, async errorMsg => {
          if (!errorMsg) {
            validateFieldList.push(errorMsg);
            if (
              validateFieldList.length == rlusItems.length &&
              validateFieldList.every(v => v === "")
            ) {
              this.secondLogin();
              // this.isSuccess = true;
              // console.log(this.form);
              // setTimeout(() => {
              //   this.isSuccess = false;
              // }, 3000);
            }
          }
        });
      }
    },
    // 第一次登录
    firstLogin() {
      const v = this.ProvinceList.find(
        item => item.id === this.form.enterpriseInfo.provinceId
      );

      let params = {
        provinceName: v.pinyin, // 省份名称
        creditCodeOrTaxPayerId: this.form.enterpriseInfo.creditCode, // 统一社会信用代码/纳税人识别号
        phoneNumber: this.form.enterpriseInfo.phone, // 手机号
        password: this.form.enterpriseInfo.password, // 密码
        legalPerson: this.form.enterpriseInfo.legalPerson, // 法人
        provinceId: this.form.enterpriseInfo.provinceId, // 省份id
        legalPersonRatio: this.form.enterpriseInfo.legalPersonRatio, // 法人比例
        taxpayerName: this.form.enterpriseInfo.taxpayerName // 纳税人名称
      };

      if (this.needCityCodeList.includes(params.provinceName)) {
        this.noMsgCodeLogin(params);
      } else {
        login(params).then(res => {
          if (res.data.code !== 0) {
            return this.$message.error(res.data.message);
          }
          this.uuid = res.data.uuid;
          this.enterpriseId = res.data.enterpriseId;

          if (res.data.needSendCaptchaCode == 0) {
            //不需要验证码
            // this.sendCodeBtn = true
            if (res.data.queryTaskStatus == 100) {
              this.isSuccess = true;
            }
            if (res.data.queryTaskStatus == 200) {
              this.getSuccessBtn = true;
              return this.$message.success("数据已同步");
            }
          } else {
            //需要验证码
            this.sendCodeBtn = true;
          }
        });
      }
    },
    //第二次登录 验证码登录
    secondLogin() {
      const v = this.ProvinceList.find(
        item => item.id === this.form.enterpriseInfo.provinceId
      );
      let params = {
        provinceName: v.pinyin,
        creditCodeOrTaxPayerId: this.form.enterpriseInfo.creditCode,
        phoneNumber: this.form.enterpriseInfo.phone,
        password: this.form.enterpriseInfo.password,
        code: this.form.code,
        enterpriseId: this.enterpriseId,
        uuid: this.uuid
      };
      smsMsLogin(params).then(res => {
        this.$set(this.form.enterpriseInfo, "id", this.enterpriseId);
        this.getSuccessBtn = false;
        this.isSuccess = true;
      });
    },

    noMsgCodeLogin(data) {
      let params = {
        creditCode: this.form.enterpriseInfo.creditCode,
        phone: this.form.enterpriseInfo.phone,
        password: this.form.enterpriseInfo.password,
        provinceName: data.provinceName,
        provinceId: this.form.enterpriseInfo.provinceId
      };
      noCodeL(params).then(res => {
        this.$set(this.form.enterpriseInfo, "id", this.enterpriseId);
        this.getSuccessBtn = false;
        this.isSuccess = true;
      });
    },

    handleTabClick(id) {
      this.current = id;
      const mapObj = {
        0: "basicInfo",
        1: "appropriations",
        2: "taxCredit",
        3: "InvoiceAmount",
        4: "SupplementaryTax",
        5: "SupplementaryInformation"
      };
      this.$refs[mapObj[id]].scrollIntoView({ behavior: "smooth" });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
.tab-bar {
  position: absolute;
  left: 10px;
  top: 0px;
  width: calc(100% - 20px);
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  display: flex;
  .tab-item {
    height: 100%;
    width: 100px;
    text-align: center;
    font-size: 14px;
  }
  .tab-item-ac {
    background-color: rgba(64, 158, 255, 0.1);
    color: #409eff;
    border-top: 2px solid #409eff;
  }
}
.form-main {
  margin-top: 40px;
  height: calc(
    100% - 80px
  ); /* 将高度设置为父级容器高度减去上方固定元素的高度 */
  overflow-y: auto;
  // overflow: scroll;
  .form-box {
    text-align: center;
    margin-top: 40px;
  }
  .uploadPic {
    width: 90px;
    height: 90px;

    background: #eeeeee;
    border-radius: 8px;
    position: relative;
    > i {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .inputSty {
    display: flex;
  }
  .box-card {
    margin-bottom: 30px;
  }
}
.clearfix {
  clear: both;
  font-weight: bold;
}
.product-img {
  width: 500px;
  display: flex;
  .product-img-box {
    position: relative;
    .i2 {
      position: absolute;
      right: -1px;
      top: -5px;
    }
  }
  .uploadPic {
    width: 80px;
    height: 80px;
    // margin-left: 10px;
    background: #eeeeee;
    border-radius: 8px;
    position: relative;

    .i1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  img {
    width: 80px;
    height: 80px;
    margin-right: 13px;
  }
}
</style>
